<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 375px;
        height: 667px;
        border: 1px solid #000;
        margin: 8px;
        position: relative;
      }
      header {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #000;
        text-align: center;
        line-height: 60px;
      }
      li {
        width: 345px;
        height: 100px;
        border: 1px solid #000;
        margin: 15px;
        list-style: none;
      }
      .footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 80px;
        border-top: 1px solid #000;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <h2>组件的组合和嵌套</h2> -->
      <div class="container" :style="{fontSize: size + 'px'}">
        <wb-header @big="add"></wb-header>
        <wb-list :list="list"></wb-list>
        <wb-form @getitem="fn"></wb-form>
      </div>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 开发头部组件
      const WbHeader = {
        data() {
          return {
            size: 12,
          };
        },
        template: `
          <header>微博头部 - <button @click="handleClick">+</button></header>
        `,
        methods: {
          handleClick() {
            this.size++;
            this.$emit("big", this.size);
          },
        },
        mounted() {
          this.$emit("big", this.size);
        },
      };

      // 开发列表的item组件
      const WbListItem = {
        props: ["item"],
        template: `
          <li>
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
            <button>点赞</button>
          </li>
        `,
      };

      // 开发列表组件
      const WbList = {
        props: ["list"],
        template: `
          <ul>
            <wb-list-item
              v-for="item in list"
              :key="item.id"
              :item="item"
            ></wb-list-item>
          </ul>
        `,
        components: {
          WbListItem,
        },
      };

      // 开发form组件
      const WbForm = {
        data() {
          return {
            value: "",
            value2: "",
          };
        },
        methods: {
          send() {
            // console.log(this.value);
            // console.log(this.value2);

            if (this.value && this.value2) {
              this.$emit("getitem", {
                title: this.value,
                content: this.value2,
              });
              this.value = "";
              this.value2 = "";
            }
          },
        },
        template: `
          <div class="footer">
            <input type="text" v-model="value" placeholder="标题" />
            <input type="text" v-model="value2" placeholder="内容" />
            <button @click="send">发送</button>
          </div>
        `,
      };

      const app = createApp({
        data() {
          return {
            size: 0,
            list: [
              {
                id: 1,
                title: "台湾地区4月总人口数为2334万人",
                content: "4月新生儿仅9643人，较3月减少2863人。",
              },
              {
                id: 2,
                title: "井冈山的斗争——依靠群众求胜利",
                content: "解释了为什么在四周白色政权的包围之中",
              },
              {
                id: 3,
                title: "如此“烧钱”拱火，美国还能撑多久",
                content: "美国国防部当地时间9日宣布",
              },
            ],
          };
        },
        methods: {
          add(size) {
            this.size = size;
          },
          fn(item) {
            // console.log(item);
            this.list.push({
              id: new Date().getTime(),
              ...item,
            });
          },
        },
        components: {
          WbHeader,
          WbList,
          WbForm,
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
